<template>
  <div class="main">
    <span>商品清单如下：</span>
    <ul>
      <li v-for="(item,index) in goods" :key="index">{{item.shopName}}{{item.price}}元/份
      </li>
    </ul>
    <span>请选择购买数量：</span>
    <addConst v-for="(item,index) in goods" :key="index" :goods="goods[index]"></addConst>
    <span>总价为：{{sum}}</span>
  </div>
</template>
<script>
import addConst from "./components/addConst";
export default {
  name: "BuyFoodApp",
  components: {
    addConst,
  },
  data() {
    return {
      goods: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],sum:0
    };
  },
  watch:{
    goods:{
      deep:true,
      handler(val){
        this.sum=0
       val.forEach(ele=>this.sum+=ele.count*ele.price)
      }
    }
  },
  mounted() {},
  methods: {},
};
</script>
<style>
  *{
    list-style: none;
    box-sizing: border-box;
    margin: 0;
    padding:0;
  }
  .main>span{
    line-height: 40px;
  }
</style>